<template>
    <view class="check-status" v-if="selected" @click="selectPhoto()">
        <view class="check"></view>
        <view class="circle"></view>
        <view class="dots">
            <view class="dot dot0"></view>
            <view class="dot dot60"></view>
            <view class="dot dot120"></view>
            <view class="dot dot180"></view>
            <view class="dot dot240"></view>
            <view class="dot dot300"></view>
        </view>
    </view>
    <!-- 取消选中 -->
    <view class="check-status no-check" v-else @click="selectPhoto()"></view>
</template>
<script>
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        selected: {
            type: Boolean,
            default: false
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        selectPhoto() {
            this.$emit('selectPhoto');
        }
    },
    components: {}
};
</script>
<style lang="scss" scoped="scoped">
.check-status {
    position: absolute;
    right: 0;
    bottom: 0rpx;
    width: 90rpx;
    height: 90rpx;
    z-index: 10;
}

.check {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(@/pages/indexPages/static/searchResults/check.png) no-repeat center;
    background-size: cover;
    border-radius: 100%;
    box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(255, 71, 115, 0.6), inset 0rpx -1rpx 10rpx 0rpx #ff2f62, inset 0rpx 4rpx 3rpx 0rpx #ff95b3;
    animation: heartMove 0.6s linear;
}

.no-check {
    background: url(@/pages/indexPages/static/searchResults/noCheck.png) no-repeat center;
    background-size: cover;
    animation: noHeartMove 0.4s linear;
}
.circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1.2);
    border: 1rpx solid #ff4270;
    border-radius: 100%;
    opacity: 0;
    animation: circleMove 0.28s 0.3s linear;
}
.dots {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    .dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        transform: translate(0, -50%);
        border-radius: 10rpx;
        transform-origin: 0% 50%;
        &::after {
            position: absolute;
            content: '';
            right: -3px;
            top: 50%;
            transform: translate(0, -50%);
            width: 8rpx;
            height: 8rpx;
            border-radius: 10rpx;
            background: #ff4270;
            opacity: 0;
            animation: dotsMove 0.4s 0.4s linear;
        }
    }
    .dot0 {
        transform: rotate(0deg);
        &::after {
            width: 6rpx;
            height: 6rpx;
        }
    }
    .dot60 {
        transform: rotate(60deg);
        &::after {
            width: 5rpx;
            height: 5rpx;
        }
    }
    .dot120 {
        transform: rotate(120deg);
        &::after {
            width: 7rpx;
            height: 7rpx;
        }
    }
    .dot180 {
        transform: rotate(180deg);
        &::after {
            width: 9rpx;
            height: 9rpx;
        }
    }
    .dot240 {
        transform: rotate(240deg);
        &::after {
            width: 9rpx;
            height: 9rpx;
        }
    }
    .dot300 {
        transform: rotate(300deg);
        &::after {
            width: 10rpx;
            height: 10rpx;
        }
    }
}
@-webkit-keyframes heartMove {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes circleMove {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes dotsMove {
    0% {
        opacity: 1;
        transform: translate(0, -50%);
    }

    50% {
        opacity: 1;
        transform: translate(1px, -50%);
    }

    100% {
        opacity: 0;
        transform: translate(2px, -50%);
    }
}

@-webkit-keyframes noHeartMove {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
</style>
